<template>
  <div>
    <van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in state.images" :key="image">
    <img :src="image.pic" />
  </van-swipe-item>
</van-swipe>
  </div>
</template>
<script>
import axios from 'axios'
import {reactive,onMounted } from 'vue';
import { getBanner } from '@/request/api/home';
export default {
    setup() {
    const state=reactive({
      images:[
    ]});
    onMounted(async ()=>{
      // axios.get('').then(({data})=>{
      //   data.banners.forEach(item=>state.images.push(item.pic))
      //   console.log(data)
      // })
      let res=await getBanner()
       state.images=res.data.banners
     
    })
    return { state};
  },
};
</script>
<style lang="less" scoped>
  .van-swipe {
    width: 100%;
        .van-swipe-item {
          padding: 0 0.2rem;
            img{
                width: 100%;
                height: 3rem;
            }
        }
      ::v-deep .van-swipe__indicator--active{
            background-color: rgb(219, 130, 150);
        }
    }

  
</style>
